<template>
<!--  图片-->
    <div class="demo-image__lazy">
      <el-image class="el-image" v-for="url in store.state.picArray" :key="url" :src="url" lazy></el-image>
    </div>
  <hr>
<!--  飞行信息-->
  <div style="height: 160px">
    <div style="font-size: small;padding-left: 20px;text-align: left">
      <!--无人机会话连接状态-->
      <p>{{this.connectState}}</p>
      <p>无人机编号：{{this.store.state.currentUVAId}}</p>
      <p>经度:&nbsp;{{this.store.state.currentUVAInfo.location.longitude}}</p>
      <p>纬度:&nbsp;{{this.store.state.currentUVAInfo.location.latitude}}</p>
      <p>高度:&nbsp;{{this.store.state.currentUVAInfo.location.height}}m</p>
      <p>电量:&nbsp;{{this.store.state.currentUVAInfo.battery}}%</p>
      <el-button round type="primary"  @click="illegalBuildingsObjective">
        违建识别
      </el-button>
    </div>
  </div>
  <hr>
<!--  控制-->
  <div style="height:280px;padding: 10px;margin: 10px">
    <div style="padding-bottom: 10px;text-align: center">
      <el-switch
          v-model="value1"
          active-color="#13ce66"
          inactive-color="#ff4949"
          inactive-text="手动操控"
          active-text="自动飞行"
          @change=switchController($event)
      />
    </div>
    <hr>
    <div style="height: 80px" >
      <el-button  type="primary" style="float: left;" @click="sendCtrlCmd(5)">
        <el-icon>
          <sort-down></sort-down>
        </el-icon>
      </el-button>
      <el-button  type="primary" style="float: right" @click="sendCtrlCmd(4)">
        <el-icon>
          <sort-up></sort-up>
        </el-icon>
      </el-button>
    </div>
    <div style="border: dimgrey;border-style: double;background-color: dimgrey;height: 150px;">
      <div style="padding-bottom: 10px;text-align: center">
        <el-button  type="primary" style="float: top;" @click="sendCtrlCmd(2)">
          <el-icon>
            <arrow-up-bold>
            </arrow-up-bold>
          </el-icon>
        </el-button>
      </div>

      <div style="padding-bottom: 10px;text-align: center">
        <el-button  type="primary" @click="sendCtrlCmd(1)">
          <el-icon>
            <arrow-left-bold>
            </arrow-left-bold>
          </el-icon>
        </el-button>
        <el-button  type="primary" @click="shot">
          <el-icon>
            <camera></camera>
          </el-icon>
        </el-button>
        <el-button  type="primary" @click="sendCtrlCmd(0)">
          <el-icon>
            <arrow-right-bold>
            </arrow-right-bold>
          </el-icon>
        </el-button>
      </div>

      <div style="text-align: center">
        <el-button  type="primary" @click="sendCtrlCmd(3)">
          <el-icon>
            <arrow-down-bold>
            </arrow-down-bold>
          </el-icon>
        </el-button>
      </div>
    </div>
  </div>
  <div style="height: 80px;padding:10px">
    <el-button round type="primary" style="margin:10px;width: 90%;display: inline-block;padding-top: 10px" @click="finishTask" :disabled="finishTaskBtn">
      任务完成
    </el-button>
  </div>
</template>

<script>
import {ArrowUpBold,ArrowDownBold,ArrowRightBold,ArrowLeftBold,SortUp,SortDown,Camera} from '@element-plus/icons-vue'
import request from "@/utils/request";
import {ElMessage,ElNotification } from 'element-plus'
export default {
  name: "ControllerPanel",
  components:{ArrowUpBold,ArrowDownBold,ArrowRightBold,ArrowLeftBold,SortUp,SortDown,Camera},
  data(){
    return{
      warningTimeout:0,
      updatePicTimeout:0,
      connectStateTimeout:0,
      isFinishedTimeout:0,
      store:this.$store,
      urls:this.$store.state.picArray,
      value1:true,
      connectState:"",
      finishTaskBtn:true
    }
  },
  unmounted() {
    window.clearTimeout(this.updatePicTimeout);
    window.clearTimeout(this.warningTimeout);
    window.clearTimeout(this.connectStateTimeout);
    window.clearTimeout(this.isFinishedTimeout);
  },
  mounted() {
    this.getWarning();
    this.updatePicture();
    this.getConnectState();

    setTimeout(()=>{this.queryIsFinished();},3000);
  },

  methods:{
    illegalBuildingsObjective:function (){
      request.get("pic/getIllegalBuildingPairs/"+this.store.state.currentUVAId).then(res=>{
        console.log(res)
      })
    },
    getConnectState:function (){
      request.get("aircraftman/getConnectionstate/"+this.store.state.currentUVAId).then(res=>{
        if(this.connectState==='重连中...'&&res.data.msg==='连接正常'){
          this.store.commit('addLogInfo','无人机重新连接');
        }
        if(this.connectState==='连接正常'&&res.data.msg==='重连中...'){
          this.store.commit('addLogInfo','无人机正在尝试重新连接...');
        }
        this.connectState=res.data.msg;
        this.connectStateTimeout = setTimeout(()=>{
          this.getConnectState();
        },500);
      })
    },
    updatePicture:function (){
      request.get("/aircraftman/picupdate/"+this.store.state.currentUVAId).then(res=>{
        if(res.data.code===0){
          // console.log("新增图片");
          this.store.commit('addPic',res.data.msg);
        }
        this.updatePicTimeout=setTimeout(()=>{
          this.updatePicture();
        },1000);
      })
    },
    getWarning:function (){
      request.get("/aircraftman/getwarning/"+this.store.state.currentUVAId).then(res=>{
        if(res.data.code!==0) {
          ElNotification({
            title:res.data.code,
            message:res.data.msg,
            type:'error',
            duration:0,
            position: 'top-left',
          });
          this.store.commit('addLogInfo',res.data.msg);
        }
        this.warningTimeout = setTimeout(()=>{this.getWarning()},1000);
      });
    },

    queryIsFinished:function (){
      let aircrafts = this.store.state.aircraft;
      let currentId = this.store.state.currentUVAId;
      let aircraft = aircrafts[0];
      for(let i=0;i<aircrafts.length;i++){
        if(aircrafts[i].id===currentId){
          aircraft = aircrafts[i];
          break;
        }
      }
      //如果状态还未修改未为可用，不允许结束
      if(aircraft.available===false){
        //弹窗警告
      }else {
        console.log(aircraft);
        ElMessage.success({
          showClose:true,
          duration:0,
          message:'无人机任务完成！'
        });
        this.finishTaskBtn=false;
        this.store.commit('addLogInfo','无人机任务成功完成！');
        return;
      }
      this.isFinishedTimeout=setTimeout(()=>{this.queryIsFinished()},1000);
    },
    finishTask:function (){
      let aircrafts = this.store.state.aircraft;
      let currentId = this.store.state.currentUVAId;
      let aircraft = aircrafts[0];
      for(let i=0;i<aircrafts.length;i++){
        if(aircrafts[i].id===currentId){
          aircraft = aircrafts[i];
          break;
        }
      }

      //如果状态还未修改未为可用，不允许结束
      if(aircraft.available===false){
        //弹窗警告
        ElMessage.error('无人机还未执行完任务，不允许关闭！')
      }else {
        //清空日志、关闭
        this.store.commit('setLogVisible',false);
        this.store.commit('clearAllLog');
        //返回首页
        // this.store.commit('taskListViewOnAndOff',true);
        // this.store.commit('rightAsideControllerOnAndOff',false);
        // this.store.commit('rightAsideOnAndOff',false);
        this.$router.go(0);
      }
    },
    switchController:function (mode){
      // let param = new URLSearchParams();//不用@RequestBody接收数据，而用@RequestParam时，要用这个方式传数据
      // param.append('uvaId',this.store.state.currentUVAId);
      // if(mode===false){
      //   param.append('mode',1);
      // }else{
      //   param.append('mode',0);
      // }
      let modeType=0;
      if(mode===false){
        modeType=1;
        this.store.commit('addLogInfo','切换为手动控制模式1');
      }else{
        modeType=0;
        this.store.commit('addLogInfo','切换为自动控制模式0');
      }
      request.post("/aircraftman/controllmode/"+this.store.state.currentUVAId+"/"+modeType);
    },
    sendCtrlCmd:function (direction){
      // let param = new URLSearchParams();
      // param.append('uvaId',this.store.state.currentUVAId);
      // param.append('direction',direction);
      this.store.commit('addLogInfo','发送遥控命令'+direction);
      request.post("/aircraftman/sendctrlcmd/"+this.store.state.currentUVAId+"/"+direction);
    },
    shot:function (){
      this.store.commit('addLogInfo','发送拍照信息');
      request.get("/aircraftman/shot/"+this.store.state.currentUVAId)
    }
  }
}
</script>

<style scoped>
.demo-image__lazy {
  height: 300px;
  overflow-y: auto;
}

  .el-image {
    display: block;
    min-height: 200px;
  }



</style>